<template>
    <u-sticky>
        <u-navbar :title="title" placeholder @leftClick="onLeftClick" :fixed="false">
            <view slot="left">
                <view class="page-header center">
                    <view class="left-icon center">
                        <!-- <u-icon name="account-fill" color="#65AB6C" size="50rpx"></u-icon> -->
                        <image 
                            :src=" Object.keys(loginData).length === 0?'../../static/images/smallTx.svg':loginData.avatar" 
                            style="width:50rpx;height:50rpx;border-radius:50%"/>
                    </view>
                    <view style="font-size: 28rpx; font-weight: 400; color: #333">
                        {{ Object.keys(loginData).length === 0 ? '未登录，点击前往登录页' : loginData.nickName }}
                    </view>
                </view>
            </view>
        </u-navbar>
    </u-sticky>
</template>

<script>
export default {
    name: "MyNavbar",
    props: {
        title: {
            type: String,
            required: false,
            default: " "
        },
        loginData:{
            type: Object,
            required: false,
            default:{}
        },
    },
    data() {
        return {
            // loginData:{}
          
        }
    },
    mounted() {
        uni.getSystemInfo({
            success: (res) => {
                this.windowWidth = res.windowWidth
                this.windowHeight = res.windowHeight
                this.safeAreaInsets = res.safeAreaInsets
            }
        })
    },
    created() {

    },
    methods: {
        onLeftClick() {
            if (!uni.getStorageSync('appKey')) {
                uni.navigateTo({
                    url: '/pages/login/login'
                })
            }
            else{
                uni.navigateTo({
                    url: `/pages/userInfo/userInfo`
                })
            }
        },

    }
}
</script>

<style lang="scss">
* {
    transition: all .5s;
}
.page-header{
  display: flex;
  align-items: center;
}
.left-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: rgba(246, 255, 247, 1);
  margin-right: 28rpx;
}
</style>
